<template>
  <el-container :style="{height: formStyle}">
    <el-header>
      <div style="">
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="goBack">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">查看增值元数据</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-header>
    <el-main style="padding: 0px">
      <div style="font-family: PingFangSC-Regular">
        <el-form ref="formData" :model="formData" class="demo-ruleForm" disabled>
          <el-form-item :label-width='itemWidth' label="图书名称：" prop="bookName">
            <el-input v-model="formData.bookName" :style="inputWidth" autocomplete="off" required="true"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="选题号：" prop="topicNumber">
            <el-input v-model="formData.topicNumber" :style="inputWidth" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="ISBN：" prop="isbn">
            <el-input v-model="formData.isbn" :style="inputWidth" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="主   编：">
            <el-input v-model="formData.mainEditor" :style="inputWidth" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="副 主 编：">
            <el-input v-model="formData.deputyEditor" :style="inputWidth" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="封  面：">
            <img :src="formData.indexImg" height="200px" width="400px">
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="图书简介：">
            <el-input v-model="formData.summary" :style="inputWidth" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="图书分类：">
            <el-cascader v-model="formData.category" :options="bookSubTagList"
                         :props="{label: 'name', value: 'id', checkStrictly: true}" clearable filterable
                         style="width: 100%;"/>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="是否显示电子书：">
            <el-radio-group v-model="formData.hidden">
              <span><el-radio :label="0">显示</el-radio></span>
              <span style="margin-left:20px;"><el-radio :label="1">隐藏</el-radio></span>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width='itemWidth' label="资源开放类型：">
            <el-radio-group v-model="formData.sourcePubType">
              <div>
                <el-radio :label="1">加密（读者通过扫图书贴码并激活后才可查看资源，图书增值服务由人卫智数提供）</el-radio>
              </div>
              <div style="margin-top:10px;">
                <el-radio :label="2">开放（读者微信扫码即可查看资源，无权限要求）</el-radio>
              </div>
              <div style="margin-top:10px;">
                <el-radio :label="3">会员（读者通过微信扫码并且是人卫助手会员才可以查看资源）</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <div style="text-align: left">
        <el-button size="small" type="success" @click="goBack">关闭</el-button>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "ShowIncreaseMetadata",
  data() {
    return {
      formData: {},
      itemWidth: '160px',
      inputWidth: 'width:400px;',
      formStyle: '',
      bookSubTagList: []
    }
  },
  methods: {
    goBack: function () {
      this.$router.push("/bookLib")
    }
  },
  created() {
    this.formStyle = CONST.WORKSPACE_HEIGHT - 40 + 'px'
    this.formData = this.$route.query.formData
    this.axios.get('/pmph/action/tag/selectBookSubTagTree').then((response) => {
      this.bookSubTagList = response.data
    })
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 16px;
}

.el-upload-list__item {
  transition: none !important;
}

.upload-template {
  display: inline-block;
}
</style>
